<div id="settings">
    <div class="setting-config config">
      <div class="config-item name">
        <img class="icon" src="@/assets/icon/3D.svg" alt="">
        <span class="baseMap">BaseMap</span>
      </div>
      <div class="config-item bg">
        <div class="bgs">
          <img class="bg-item" src="@/assets/icon/bg-gray.svg"  @click="changeBg('bg', 'gray')" alt="">
          <img class="bg-item" src="@/assets/icon/bg-grid.svg"   @click="changeBg('bg', 'grid')" alt="">
          <img class="bg-item" src="@/assets/icon/floor3.png"   @click="changeBg('bg', 'floor')" alt="">
          <input class="baseMapImgUrl" 
            id="filePicker"
            type="file" 
            placeholder="底图路径"
            @click="changeFile"
            @change="changeFile"> 
        </div>
      </div>
      <div class="config-item aligins">
          <div class="aligin">
            <div class="aligin-item">
            </div>
            <div class="aligin-item" @click="multipleActiveArr.length > 0 && setMultipleState('Isometric', 'colu')">
              <label for="">间距:</label>
              <input type="number" min="0" max="500" v-model="configs.Isometric_colu">
              <img class="img" 
                v-bind:src="img.dispersion_v" 
                @mouseenter="img.dispersion_v=img.dispersion_v_hover" 
                @mouseleave="img.dispersion_v=img.dispersion_v_def" 
                alt="垂直等距" 
                title="垂直等距">
            </div>
            <div class="aligin-item" @click="multipleActiveArr.length > 0 && setMultipleState('Isometric', 'row')">
              <label for="">间距:</label>
              <input type="number" min="0" max="500" v-model="configs.Isometric_row">
              <img class="img" 
                v-bind:src="img.dispersion_l" 
                @mouseenter="img.dispersion_l=img.dispersion_l_hover" 
                @mouseleave="img.dispersion_l=img.dispersion_l_def"
                alt="水平等距" 
                title="水平等距">
            </div>
            <div class="aligin-item" @click="multipleActiveArr.length > 0 && setMultipleState('align', 'l')">
              <img         
                v-bind:src="img.l" 
                @mouseenter="img.l=img.l_hover" 
                @mouseleave="img.l=img.l_def"  
                alt="左对齐" 
                title="左对齐"></div>
            <div class="aligin-item" @click="multipleActiveArr.length > 0 && setMultipleState('align', 't')">
              <img
                v-bind:src="img.t" 
                @mouseenter="img.t=img.t_hover" 
                @mouseleave="img.t=img.t_def"  
                alt="上对齐" title="上对齐"></div>
            <div class="aligin-item" @click="multipleActiveArr.length > 0 && setMultipleState('align', 'b')">
              <img 
                v-bind:src="img.b" 
                @mouseenter="img.b=img.b_hover" 
                @mouseleave="img.b=img.b_def"   alt="下对齐" title="下对齐"></div>
            <div class="aligin-item" @click="multipleActiveArr.length > 0 && setMultipleState('align', 'r')">
              <img
                v-bind:src="img.r" 
                @mouseenter="img.r=img.r_hover" 
                @mouseleave="img.r=img.r_def"  
                alt="右对齐" title="右对齐"></div>
          </div>
      </div>
      <div class="aligin-item contrls">
        <img  
          @click="saveData()" 
          v-bind:src="img.save" 
          @mouseenter="img.save=img.save_hover" 
          @mouseleave="img.save=img.save_def" 
          alt="保存" 
          title="保存">
        <img  
          @click="getHistory()" 
          v-bind:src="img.history" 
          @mouseenter="img.history=img.history_hover" 
          @mouseleave="img.history=img.history_def" 
          alt="历史记录" 
          title="历史记录"></div>
      <div 
        class="aligin-item screen">
        <img 
          @click="screen()"
          src="@/assets/icon/screen_full.svg" 
          alt="全屏预览" 
          title="全屏预览"></div>     
    </div>
    <div class="setting-element element" v-if="currentElement && multipleActiveArr.length === 0">
      <div class="item">
        <span class="name">{{currentElement.name}}</span>
      </div>
      <comp-comm-attr-checkbox
        v-bind:label="'固定'"
        v-bind:name="'固定'"
        v-bind:attribute="'isFixed'"
        v-bind:currentElement="currentElement"/>
      <div class="item">
        <label for="" class="title">位置</label>
        <div class="subs grid grid-2">
            <comp-comm-attr-number
              v-bind:name="'上'"
              v-bind:attribute="'top'"
              v-bind:max="3200"
              v-bind:min="0"
              v-bind:currentElement="currentElement"/>
            <comp-comm-attr-number
              v-bind:name="'左'"
              v-bind:attribute="'left'"
              v-bind:max="2200"
              v-bind:min="0"
              v-bind:currentElement="currentElement"/>
        </div>
      </div>
      <div class="item">
        <label for="" class="title">大小</label>
        <div class="subs grid grid-2">
          <comp-comm-attr-number
            v-bind:name="'长'"
            v-bind:attribute="'width'"
            v-bind:max="3200"
            v-bind:min="0"
            v-bind:currentElement="currentElement"/>
          <comp-comm-attr-number
            v-bind:name="'宽'"
            v-bind:attribute="'height'"
            v-bind:max="1200"
            v-bind:min="0"
            v-bind:currentElement="currentElement"/>
        </div>
      </div>
      <div class="item" v-if="currentElement.type === 'text'">
        <label for="" class="title">字体</label>
        <div class="subs grid grid-1">
          <comp-comm-attr-number
            v-bind:name="'大小'"
            v-bind:attribute="'fontSize'"
            v-bind:max="50"
            v-bind:min="12"
            v-bind:currentElement="currentElement"/>
          <comp-comm-attr-color
            v-bind:currentElement="currentElement"
            v-bind:name="'颜色'"
            v-bind:attribute="'color'"
            v-on:selColor="selColor"
          />
        </div>
      </div>
      <div class="item"  v-if="currentElement.type === 'device'">
        <div class="subs grid grid-1">
          <comp-comm-attr-color
            v-bind:currentElement="currentElement"
            v-bind:name="'背景'"
            v-bind:attribute="'background'"
            v-on:selColor="selColor"
          />
        </div>
      </div>

      <div class="item" v-if="currentElement.type === 'aisle' || currentElement.type === 'pillar' || currentElement.type === 'device'">
          <comp-opeacity v-bind:currentElement="currentElement"/>
      </div>

      
      <div class="item">
        <label for="" class="title">旋转</label>
        <div class="subs grid grid-1">
          <comp-comm-attr-number
            v-bind:name="'角度'"
            v-bind:attribute="'rotate'"
            v-bind:max="360"
            v-bind:min="-360"
            v-bind:currentElement="currentElement"/>
        </div>
      </div>
      <div class="item">
        <comp-comm-attr-checkbox
          v-bind:label="'阴影'"
          v-bind:name="'应用阴影'"
          v-bind:attribute="'isApplyShadow'"
          v-bind:currentElement="currentElement"/>
      </div>
      <div class="item" v-if="currentElement.type === 'room'">
        <comp-comm-attr-checkbox
          v-bind:label="'材质'"
          v-bind:name="'应用材质'"
          v-bind:attribute="'bgiBool'"
          v-bind:currentElement="currentElement"/>
      </div>
      <div class="item">
        <label for="" class="title">圆角</label>
        <div class="subs">
          <div class="subs-item">
          <select class="val-s" v-model="currentElement.style.borderRadius">
            <option v-bind:value="0">无</option>
            <option v-bind:value="50">圆角</option>
          </select>
        </div>
      </div>
    </div>
    <div class="item del-item">
      <img class="del"  
        v-bind:class="{
          delDef:currentActiveIndex === -1
        }"
        @click="delComp()" src="@/assets/icon/delete.svg" alt="">
    </div>
    </div>
    <div class="setting-element element" v-if="currentActiveIndex === -1">
      <comp-multip-setting 
        v-on:setMultipleState="setMultipleState"
        v-bind:multipleApplyBorderRadius="multipleApplyBorderRadius"
        v-bind:multipleApplyShadow="multipleApplyShadow"
      />
      <comp-multip-del 
        v-on:delComp="delComp"
        v-bind:currentActiveIndex="currentActiveIndex"/>
      <comp-multip-list
        v-bind:multipleActiveArr="multipleActiveArr"
        v-on:delMultipComp="delMultipComp"/>
    </div>
   </div>